<template>
	<view class="my-team">
		<view class="my-team-detail">
			<view class="my-team-num">
				<text>{{num}}</text>
				<text>团队人数</text>
			</view>
			<view>
				招募队员越多 队长收益越大
			</view>
			<view class="my-team-menber">
				<view><image :src="avatarUrl"></image></view>
				<view v-if="avatarList[0]"><image :src="avatarList[0]"></image></view>
				<view v-else><text>+</text></view>
				<view v-if="avatarList[1]"><image :src="avatarList[1]"></image></view>
				<view v-else><text>+</text></view>
				<view v-if="avatarList[2]"><image :src="avatarList[2]"></image></view>
				<view v-else><text>+</text></view>
				<view v-if="avatarList[3]"><image :src="avatarList[3]"></image></view>
				<view v-else><text>+</text></view>
			</view>
			<view class="recruit-member">
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share">
					招募队员
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button @click="open_share_tip">
					招募队员
				</button>
				<!-- #endif -->
				
				<view style="font-weight:550;" v-if="inviteNum>0">
					再招募<text style="color: rgb(255, 60, 0);">{{inviteNum}}位</text>队员升级为队长
				</view>
			</view>
		</view>
		<view class="my-team-invite-detail">
			<view class="my-team-title">
				<text>我的团队</text>
			</view>
			<view class="my-team-invite">
				<scroll-view v-if="list.length>10||last_page>1" scroll-y="true" :style="'height:660px'" @scrolltolower="loadingMore">
					<view class="my-team-invite-member" v-for="(one,index) in list" :key="index">
						<view>
							<view>
								<image :src="one.avatar"></image>
							</view>
							<view>
								<text>{{one.nickname}}</text>
								<text>{{one.create_time}}</text>
							</view>
						</view>
						<view class="my-team-invite-num">
							邀请<text style="color: rgb(255, 60, 0);">{{one.invite_num}}</text>人
						</view>
					</view>
				</scroll-view>
				<view v-else class="my-team-invite-member" v-for="(one,index) in list" :key="index">
					<view>
						<view>
							<image :src="one.avatar"></image>
						</view>
						<view>
							<text>{{one.nickname}}</text>
							<text>{{one.create_time}}</text>
						</view>
					</view>
					<view class="my-team-invite-num">
						邀请<text style="color: rgb(255, 60, 0);">{{one.invite_num}}</text>人
					</view>
				</view>
			</view>
		</view>
		<ending v-if="page==1||page>last_page"></ending>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="../../../static/share_tip.png"></image></view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {formaIncomeTime} from '@/common/util.js'
	import ending from '../../../common/ending.vue'
	export default{
		//分享
		onShareAppMessage(res) {
			return {
				title: this.copy_write,
				path: 'pages/home/home?share_id='+this.$store.getters.getUserId+'&fromJin=2',
				imageUrl: this.image_src
			}
		},
		components:{ending,uniPopup},
		data() {
			return {
				inviteNum: 5,
				token: this.$store.getters.getToken,
				list: [],
				num:0,
				avatarList: [],
				avatarUrl: '',
				page: 1,
				last_page: 1,
				image_src: '',
				copy_write: '',
			}
		},
		onLoad(options) {
			if(options.token!=undefined) {
				this.token = options.token
			}
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.avatarUrl = this.$store.state.avatarUrl
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			// 获取我的团队数据
			getData() {
				this.page=1
				let data = {
					token: this.token,
					page: this.page
				}
				this.$api.get_my_team(data).then(res => {
					if(res.status) {
						this.copy_write = res.data.index.copy_write
						this.image_src = res.data.index.image_src
						this.list = res.data.my_team.data
						this.last_page = res.data.my_team.last_page
						this.num = res.data.num
						this.avatarList = res.data.avatar
						this.inviteNum = this.$store.getters.getNum-res.data.avatar.length
						for(let i=0;i<this.list.length;i++) {
							this.list[i].create_time = formaIncomeTime(this.list[i].create_time)
						}
					}
					console.log('获取我的团队数据',res)
				}).catch(err => {
					console.log('获取我的团队数据',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						page: this.page
					}
					this.$api.get_my_team(data).then(res => {
						if(res.status) {
							for(let i=0;i<res.data.my_team.data.length;i++) {
								res.data.my_team.data[i].create_time = formaIncomeTime(res.data.my_team.data[i].create_time)
							}
							this.last_page = res.data.my_team.last_page
							this.list = this.list.concat(res.data.my_team.data)
							
							// H5分享
							let link = this.$store.state.H5URL+'pages/home/home?share_id='+this.$store.getters.getUserId+'&fromJin=2'
							let share_detail = '这是招募队员分享详情'
							this.share(this.copy_write,share_detail,this.image_src,link=link)
						}
						console.log('获取我的团队数据',res)
					}).catch(err => {
						console.log('获取我的团队数据',err)
					})
				}
			},
			
			open_share_tip() {
				this.$refs.shareTip.open();
			}
		}
	}
</script>

<style>
	page{
		position: relative;
		background-color: #F5F6F9;
	}
	.my-team{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.my-team-detail{
		width: 100%;
		height: 556upx;
		background: #FFFFFF;
		padding: 0 30upx;
		padding-top: 52upx;
		box-sizing: border-box;
	}
	.my-team-num{
		text-align: center;
	}
	.my-team-num>text{
		display: block;
	}
	.my-team-num>text:first-child{
		color: #333333;
		font-size: 44upx;
		line-height: 60upx;
	}
	.my-team-num>text:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.my-team-detail>view:nth-child(2){
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 24upx;
		font-size: 24upx;
		color: #666666;
		margin: 0 auto;
		margin-top: 56upx;
	}
	.my-team-menber{
		height: 64upx;
		margin-top: 60upx;
		display: flex;
		/* padding-left: 248upx; */
		box-sizing: border-box;
		position: relative;
	}
	.my-team-menber>view{
		width: 64upx;
		height: 64upx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
	}
	.my-team-menber>view:nth-child(1){
		left: 248upx;
		z-index: 999;
	}
	.my-team-menber>view:nth-child(2){
		left: 296upx;
		z-index: 888;
	}
	.my-team-menber>view:nth-child(3){
		left: 344upx;
		z-index: 777;
	}
	.my-team-menber>view:nth-child(4){
		left: 392upx;
		z-index: 666;
	}
	.my-team-menber>view:nth-child(5){
		left: 440upx;
		z-index: 555;
	}
	.my-team-menber>view>image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.my-team-menber>view>text{
		width: 100%;
		height: 100%;
		line-height: 64upx;
		border-radius: 50%;
		background: #F2F2F2;
		border: 1upx solid #DEDEDE;
		color: #999999;
		display: inline-block;
		text-align: center;
	}
	.recruit-member{
		margin-top: 30upx;
	}
	.recruit-member>button:first-child{
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(#CBEC00,#00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0,166,106,0.4);
		border-radius: 40upx;
		margin: 0 auto;
	}
	.recruit-member>view:last-child{
		text-align: center;
		color: rgba(0,166,106,0.8);
		font-size: 24upx;
		margin-top: 20upx;
	}
	.my-team-invite-detail{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.my-team-title{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
	}
	.my-team-title>text{
		display: inline-block;
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		background: #EFEFEF;
		border-radius: 34upx;
		text-align: center;
		color: #333333;
		font-size: 28upx;
	}
	.my-team-invite-member{
		padding: 22upx 0;
		box-sizing: border-box;
		width: 100%;
		border-top: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.my-team-invite-member>view:first-child{
		display: flex;
	}
	.my-team-invite-member>view:first-child>view:last-child{
		margin-left: 20upx;
	}
	.my-team-invite-member>view:first-child>view>text{
		display: block;
	}
	.my-team-invite-member>view:first-child>view>text:first-child{
		color: #666666;
		font-size: 30upx;
	}
	.my-team-invite-member>view:first-child>view>text:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
	}
	.my-team-invite-member image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.my-team-invite-member .my-team-invite-num{
		color: #666666;
		font-size: 30upx;
		margin-top: 24upx;
		height: 42upx;
		line-height: 42upx;
	}
	
	/* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
